<template>
    <div class="popular">
        <!-- 标题 -->
        <van-row type="flex" justify="space-between">
            <van-col class="title">
                <van-icon name="fire" color="#f06c7a" />
                <span>热门限购</span>
            </van-col>
            <van-col class="tips">
                <span>限时特惠</span>
                <span>日用好物低价拿</span>
            </van-col>
        </van-row>
        <!-- 热门商品 -->
        <div class="hot-goods">
            <van-row
                v-for="(item,index) in goodsList"
                :key="index"
                @click="goDetail"
                class="hot-goods-item m-b-10 bg-white"
            >
                <van-col :span="8">
                    <van-image lazy-load radius="3px" :src="item.pic" />
                </van-col>
                <!-- 抢购商品信息 -->
                <van-col :span="16" class="goods-info">
                    <div class="van-ellipsis goods-title">{{item.title}}</div>
                    <!-- 标题下面内容部分 -->
                    <van-row type="flex" justify="space-between" align="center">
                        <van-col :span="14">
                            <div class="price">
                                <span>￥{{item.maxGroupPrice}}</span>
                                <s>￥{{item.marketPrice}}</s>
                            </div>
                            <van-progress
                                color="#f2826a"
                                stroke-width="7"
                                pivot-text
                                :percentage="item.percentage"
                            />
                            <div class="purchased">{{item.desc}}</div>
                        </van-col>
                        <van-col :span="10" class="buy-btn">
                            <van-button round size="mini" color="#f06c7a">立即抢购</van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            goodsList: [
                {
                    goodsId: 131,
                    title:
                        "【工厂直销】洗衣凝珠持久留香珠凝珠洗衣液洗衣服凝珠洗衣服神器",
                    pic:
                        "https://t00img.yangkeduo.com/goods/images/2020-06-28/56b8262b-a086-44cc-95eb-4281e59fbac1.jpg",
                    marketPrice: "59.99",
                    maxGroupPrice: "19.90",
                    percentage: "80",
                    desc: "已抢购5603件"
                },
                {
                    goodsId: 132,
                    title:
                        "加厚大号空白草稿本学生考试草稿纸护眼白纸考研验算打草A4纸批发",
                    pic:
                        "https://t00img.yangkeduo.com/goods/images/2020-07-15/90ab78a0bb068e9f332a39a82bd462dd.jpeg",
                    marketPrice: "32.00",
                    maxGroupPrice: "6.26",
                    percentage: "90",
                    desc: "已抢购6750件"
                },
                {
                    goodsId: 133,
                    title:
                        "每日坚果混合装500g/200g休闲零食干果组合休闲零食组合大包装",
                    pic:
                        "https://t00img.yangkeduo.com/goods/images/2020-07-02/57685d52240e9702b4b16340fe932845.jpeg",
                    marketPrice: "35.00",
                    maxGroupPrice: "10.46",
                    percentage: "95",
                    desc: "已抢购4.6万件"
                }
            ]
        };
    },
    methods: {
        goDetail() {
            this.$router.push("/detail?goods_id=52157500821");
        }
    }
};
</script>

<style lang="scss" scoped>
.popular {
    padding: 0 10px;
    .title {
        display: flex;
        align-items: center;
        span {
            font-size: 16px;
            font-weight: bold;
        }
        .van-icon {
            font-size: 18px;
            margin-right: 5px;
        }
    }
    .tips {
        color: #bbb;
        span {
            padding: 0 3px;
        }
    }
    .hot-goods {
        margin-top: 10px;
        .hot-goods-item {
            border-radius: 10px;
            .goods-info {
                padding: 8px;
                .goods-title {
                    font-size: 14px;
                    margin-bottom: 10px;
                    color: #000;
                }
                .price {
                    display: flex;
                    align-items: center;

                    span {
                        font-size: 20px;
                        color: #f06c7a;
                        margin-bottom: 5px;
                        margin-right: 10px;
                    }
                    s {
                        color: #bbb;
                    }
                }
                .purchased {
                    color: #bbb;
                    margin-top: 5px;
                }
                .buy-btn {
                    text-align: center;
                    .van-button--mini {
                        padding: 0 5px;
                    }
                }
            }
        }
    }
}
</style>